@charset "utf-8";
@import "reset";
$zcm:40;
@function r($px) {
    @return $px/(2*$zcm) * 1rem;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
}

header {
    width: 100%;
    height: r(76);
    position: absolute;
    top: 0;
    text-align: center;
    p {
        font-size: r(30);
        line-height: r(76);
    }
}

section {
    width: 100%;
    background: white;
    position: absolute;
    top: r(76);
    bottom: r(102);
    overflow-y: scroll;
    overflow-x:hidden ;
    -webkit-overflow-scrolling: touch;
    .line {
        width: 100%;
        height: r(1);
        border-top: 1px solid #A7A7A7;
        background: #A7A7A7;
    }
    .one {
        width: 100%;
        height: r(102);
        border-bottom: 1px solid #ececec;
        .one_info {
            width: r(582);
            margin: 0 auto;
            img {
                width: r(28);
                height: r(32);
                vertical-align: middle;
            }
            span {
                font-size: r(22);
                vertical-align: middle;
            }
            span:nth-of-type(2) {
                color: #a3a3a3;
            }
            a {
                font-size: r(22);
                line-height: r(102);
                color: #000000;
            }
        }
    }
    .box {
        width: 100%;
        height: r(124);
        border-bottom: 1px solid #ECECEC;
        .box-info {
            width: r(582);
            margin: 0 auto;
            margin-top: r(20);
            .info-left {
                width: r(86);
                height: r(86);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .info-right {
                width: r(476);
                font-size: r(20);
                color: #b6b6b6;
                p {
                    line-height: r(40);
                    span:nth-of-type(1) {
                        font-size: r(23);
                        color: #343434;
                    }
                    #number {
                        display: inline;
                        background: #e60012;
                        border-radius: 50%;
                        color: white;
                    }
                }
            }
        }
    }
    .list {
        width: 100%;
        height: r(54);
        background: #f2f2f2;
        p {
            font-size: r(22);
            color: #a0a0a0;
            line-height: r(54);
            margin-left: r(27);
        }
    }
}

footer {
    width: 100%;
    height: r(102);
    position: absolute;
    bottom: 0;
    ul {
        width: r(640);
        margin-left: r(20);
        li {
            float: left;
            width: r(60);
            height: r(60);
            margin-right: r(60);
            img {
                width: 100%;
                height: 100%;
            }
        }
        li:nth-child(3) {
            width: r(100);
            height: r(80);
        }
    }
}

 .box1 {
        width: 100%;
        height: r(100);
        border-bottom: 1px solid #ECECEC;
        overflow: hidden;
        position: relative;
        
        &#active{
            .btn{
                right: 0;
            }
        }
        .box-info1 {
            width: r(358);
            top: r(20);
            position: absolute;
            left: r(26);
            .info-left1{
                width: r(50);
                height: r(50);
                line-height: r(50);
                margin-right: r(18);
                img {
                    width: 100%;
                    height: 100%;
                    vertical-align: top;
                }
            }
            .info-right1 {
                width: r(285);
                font-size: r(20);
                color: #b6b6b6;
                position: relative;
                bottom: r(12);
                p {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    line-height: r(40);
                    span:nth-of-type(1) {
                        font-size: r(18);
                        color: #343434;
                    }
                }
                p:nth-of-type(2){
                    font-size: r(10);
                }
                
            }
           
        }
         .btn{
             //margin-top: r(-20);
                 position: absolute;
                 right: r(-240);
                width: r(240);
                height: 100%;
                text-align: center;
               line-height: r(100);
               transition: all 500ms;
                span{
                    width: r(120);
                    height: r(100);
                    display: block;
                    color: white;
                    font-size: r(22);
                }
                span:nth-of-type(1){
                  background: #cccccc;  
                  float: left;
                }
                span:nth-of-type(2){
                    background: #7f7f7f;
                    float: right;
                }
                
            }
    }